<template>
    <div class="container">
    
        
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
            prop="name"
            label="航班"
            width="180">
            </el-table-column>
            <el-table-column
            prop="address"
            label="地址">
            </el-table-column>
            <el-table-column
                label="操作"
                width="120">
                <template slot-scope="scope">
                    <el-button
                    @click="editFn(scope.row,scope.$index)"
                    type="text"
                    size="small">
                    操作
                    </el-button>
                </template>
                </el-table-column>
        </el-table>
        <el-dialog
            title="搜索弹窗"
            :visible.sync="showSerchMask"
            width="50%">
            <div class="serchCont">
                <div class="serchItem">
                        <div>预计起飞时间：</div>
                        <el-date-picker
                        :disabled="disTime"
                        @change="sureTimeFn"
                        v-model="saveManualControl.DEPFORCASTTIME"
                        type="datetime"
                        :placeholder="activeItem.timePlace">
                        </el-date-picker>
                        <el-button :disabled="disBtn" style="margin-left: 10px;" :type="isClickWait?'success':''" @click="waitFn">待定</el-button>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showSerchMask = false">取 消</el-button>
                <el-button type="primary" @click="sureSerchFn">确 定</el-button>
            </span>
            </el-dialog>
    </div>
</template>
<script>
    export default {
        components: {},
        name:'',
        data() {
            return {
                tableData: [{
                date: '',
                name: '3810',
                timePlace:'请选择时间',

                address: '上海市普陀区金沙江路 1518 弄',
                }, {
                date: '待定',
                name: '3811',
                timePlace:'请选择时间',

                address: '上海市普陀区金沙江路 1517 弄'
                }, {
                date: '',
                name: '3812',
                timePlace:'请选择时间',

                address: '上海市普陀区金沙江路 1519 弄'
                }, {
                date: '',
                timePlace:'请选择时间',
                name: '3813',
                address: '上海市普陀区金沙江路 1516 弄'
                }],
                saveManualControl:{
                    DEPFORCASTTIME:'',
                },
                showSerchMask:false,  
                disBtn:false,//是否禁用按钮
                disTime:false,//是否禁用时间选择器
                isClickWait:false,//是否点击了待定
                nowStartTime:'',
                activeItem:{},
                activeIndex:-1,
                timePlace:'请选择时间'
            }
        },
        props: {},
        methods:{
            editFn(item,index){
                this.activeIndex = index
                this.isClickWait = false
                this.activeItem = item
                if(item.date=='待定'){
                    // this.nowStartTime=''
                    this.saveManualControl.DEPFORCASTTIME = ''
                    item.timePlace = '待定'
                }
                this.disBtn = false //取消禁用待定按钮
                this.disTime = false//取消禁用时间
                this.showSerchMask = true
            },//点击表格操作按钮
            waitFn(){
                this.disTime = true
                this.isClickWait = true
            },
            sureTimeFn(){
                this.disBtn = true
            },
            sureSerchFn(){
                axios.post(url,data).then((res)=>{

                })
                // 1.传递修改之后的给后端
                // 2.成功之后立马请求页面列表数据（保证获取的是最新的）
                // this.saveManualControl.DEPFORCASTTIME = this.nowStartTime?this.nowStartTime:'待定'
                this.tableData[this.activeIndex].date = this.tableData[this.activeIndex].date?this.tableData[this.activeIndex].date:'待定'
                // if(!this.disTime&&!this.disBtn){

                // }
                this.showSerchMask = false
                // let endStartTime = this.nowStartTime?this.nowStartTime:'待定'

            },
        },
        mounted(){},
        created() {},
    }
</script>
<style scoped lang="less">
.serchItem{
    display: flex;
    align-items: center;
}
</style>